@import "_animation.less";
//animation lib
.bounce(@t:4px;@n:bounce){
    .keyframes(@n);
    .-frames(@-...){
        0%, 20%, 53%, 80%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            @{-}transform: translate3d(0, 0, 0);
        }
        40%, 43% {
            @{-}transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            @{-}transform: translate3d(0, -@t*8, 0);
        }
        70% {
            @{-}transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            @{-}transform: translate3d(0, -@t*4, 0);
        }
        90% {
            @{-}transform: translate3d(0, -@t, 0);
        }
    }
}
.flash(){
    .keyframes(flash);
    .-frames(@-...){
        0%, 50%, 100% {
            .opacity(1);
        }
        25%, 75% {
            .opacity(0);
        }
    }
}
.pulse(@t:1.05;@n:pulse){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 1, 1);
        }
        50% {
            @{-}transform: scale3d(@t, @t, @t);
        }
        100% {
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}

.rubberBand(){
    .keyframes(rubberBand);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 1, 1);
        }

        30% {
            @{-}transform: scale3d(1.25, 0.75, 1);
        }

        40% {
            @{-}transform: scale3d(0.75, 1.25, 1);
        }

        50% {
            @{-}transform: scale3d(1.15, 0.85, 1);
        }

        65% {
            @{-}transform: scale3d(.95, 1.05, 1);
        }

        75% {
            @{-}transform: scale3d(1.05, .95, 1);
        }

        100% {
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}
.shake(@x:10px;@n:shake){
    .keyframes(@n);
    .-frames(@-...){
        0%, 100% {
            @{-}transform: translate3d(0, 0, 0);
        }

        10%, 30%, 50%, 70%, 90% {
            @{-}transform: translate3d(-@x, 0, 0);
        }

        20%, 40%, 60%, 80% {
            @{-}transform: translate3d(@x, 0, 0);
        }
    }
}
.swing(@d:5deg;@n:swing){
    .keyframes(@n);
    .-frames(@-...){
        20% {
            @{-}transform: rotate3d(0, 0, 1, @d*3);
        }

        40% {
            @{-}transform: rotate3d(0, 0, 1, -@d*2);
        }

        60% {
            @{-}transform: rotate3d(0, 0, 1, @d);
        }

        80% {
            @{-}transform: rotate3d(0, 0, 1, -@d);
        }

        100% {
            @{-}transform: rotate3d(0, 0, 1, 0deg);
        }
    }
}
.tada(){
    .keyframes(tada);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 1, 1);
        }

        10%, 20% {
            @{-}transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }

        30%, 50%, 70%, 90% {
            @{-}transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }

        40%, 60%, 80% {
            @{-}transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }

        100% {
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}
.wobble(@d:1deg;@n:wobble){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: none;
        }

        15% {
            @{-}transform: translate(-25%, 0) rotate3d(0, 0, 1, -@d*5);
        }

        30% {
            @{-}transform: translate(20%, 0) rotate3d(0, 0, 1, @d*3);
        }

        45% {
            @{-}transform: translate(-15%, 0) rotate3d(0, 0, 1, -@d*3);
        }

        60% {
            @{-}transform: translate(10%, 0) rotate3d(0, 0, 1, @d*2);
        }

        75% {
            @{-}transform: translate(-5%, 0) rotate3d(0, 0, 1, -@d);
        }

        100% {
            @{-}transform: none;
        }
    }
}

.wobbleTop(@d:1deg;@n:wobbleTop){
    .keyframes(@n);
    .-frames(@-...){
        0%{
            @{-}transform: skew(0);
            @{-}transform-origin:bottom;
        }
        16.65% {
            @{-}transform: skew(-12deg);
            @{-}transform-origin:bottom;
          }

          33.3% {
            @{-}transform: skew(10deg);
            @{-}transform-origin:bottom;
          }

          49.95% {
            @{-}transform: skew(-6deg);
            @{-}transform-origin:bottom;
          }

          66.6% {
            @{-}transform: skew(4deg);
            @{-}transform-origin:bottom;
          }

          83.25% {
            @{-}transform: skew(-2deg);
            @{-}transform-origin:bottom;
          }

          100% {
            @{-}transform: skew(0);
            @{-}transform-origin:bottom;
          }
    }
}
.wobbleBottom(@d:1deg;@n:wobbleBottom){
    .keyframes(@n);
    .-frames(@-...){
        0%{
            @{-}transform: skew(0);
            @{-}transform-origin:top;
        }
        16.65% {
            @{-}transform: skew(-12deg);
            @{-}transform-origin:top;
          }

          33.3% {
            @{-}transform: skew(10deg);
            @{-}transform-origin:top;
          }

          49.95% {
            @{-}transform: skew(-6deg);
            @{-}transform-origin:top;
          }

          66.6% {
            @{-}transform: skew(4deg);
            @{-}transform-origin:top;
          }

          83.25% {
            @{-}transform: skew(-2deg);
            @{-}transform-origin:top;
          }

          100% {
            @{-}transform: skew(0);
            @{-}transform-origin:top;
          }
    }
}
.wobbleSkew(@d:1deg;@n:wobbleSkew){
    .keyframes(@n);
    .-frames(@-...){
        16.65% {
            @{-}transform: skew(-12deg);
          }

          33.3% {
            @{-}transform: skew(10deg);
          }

          49.95% {
            @{-}transform: skew(-6deg);
          }

          66.6% {
            @{-}transform: skew(4deg);
          }

          83.25% {
            @{-}transform: skew(-2deg);
          }

          100% {
            @{-}transform: skew(0);
          }
    }
}


.bounceIn(){
    .keyframes(bounceIn);
    .-frames(@-...){
        0%, 20%, 40%, 60%, 80%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity:0;
            @{-}transform: scale3d(0, 0, 0);
        }

        40% {
            opacity:1;
            @{-}transform: scale3d(1.1, 1.1, 1.1);
        }

        70% {
            @{-}transform: scale3d(.9, .9, .9);
        }

        // 60% {
        //     .opacity(100);
        //     @{-}transform: scale3d(1.03, 1.03, 1.03);
        // }

        // 80% {
        //     @{-}transform: scale3d(.97, .97, .97);
        // }

        100% {
            opacity:1;
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}
.bounceInDown(@s:-100%;@n:bounceInDown){
    .keyframes(@n);
    .-frames(@-...){
        0%, 60%, 75%, 90%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            .opacity(0);
            @{-}transform: translate3d(0, @s, 0);
        }

        60% {
            .opacity(100);
            @{-}transform: translate3d(0, 8%, 0);
        }

        75% {
            @{-}transform: translate3d(0, -5%, 0);
        }

        90% {
            @{-}transform: translate3d(0, 2.5%, 0);
        }

        100% {
            @{-}transform: translate3d(0, 0, 0);
        }
    }
}
.bounceInLeft(@s:-100%;@n:bounceInLeft){
    .keyframes(@n);
    .-frames(@-...){
        0%, 60%, 75%, 90%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity:0;
            @{-}transform: translate3d(@s, 0, 0);
        }

        60% {
            opacity:1;
            @{-}transform: translate3d(8%, 0, 0);
        }

        75% {
            @{-}transform: translate3d(-5%, 0, 0);
        }

        90% {
            @{-}transform: translate3d(2.5%, 0, 0);
        }

        100% {
            @{-}transform: translate3d(0, 0, 0);
        }
    }
}
.bounceInRight(@s:100%;@n:bounceInRight){
    .keyframes(@n);
    .-frames(@-...){
        0%, 60%, 75%, 90%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity:0;
            @{-}transform: translate3d(@s, 0, 0);
        }

        60% {
            opacity:100;
            @{-}transform: translate3d(-8%, 0, 0);
        }

        75% {
            @{-}transform: translate3d(5%, 0, 0);
        }

        90% {
            @{-}transform: translate3d(-2.5%, 0, 0);
        }

        100% {
            @{-}transform: translate3d(0, 0, 0);
        }
    }
}
.bounceInUp(@s:100%;@n:bounceInUp){
    .keyframes(@n);
    .-frames(@-...){
        0%, 60%, 75%, 90%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity:0;
            @{-}transform: translate3d(0, @s, 0);
        }

        60% {
            opacity:1;
            @{-}transform: translate3d(0, -8%, 0);
        }

        75% {
            @{-}transform: translate3d(0, 5%, 0);
        }

        90% {
            @{-}transform: translate3d(0, -2.5%, 0);
        }

        100% {
            @{-}transform: translate3d(0, 0, 0);
        }
    }
}
.bounceInDownRight(@s:-100%;@n:bounceInDownRight){
    .keyframes(@n);
    .-frames(@-...){
        0%, 60%, 75%, 90%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity:0;
            @{-}transform: translate3d(-@s, @s, 0);
        }

        60% {
            opacity:1;
            @{-}transform: translate3d(-8%, 8%, 0);
        }

        75% {
            @{-}transform: translate3d(5%, -5%, 0);
        }

        90% {
            @{-}transform: translate3d(-2.5%, 2.5%, 0);
        }

        100% {
            @{-}transform: translate3d(0, 0, 0);
        }
    }
}
.bounceInUpRight(@s:100%;@n:bounceInUpRight){
    .keyframes(@n);
    .-frames(@-...){
        0%, 60%, 75%, 90%, 100% {
            @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity:0;
            @{-}transform: translate3d(@s, @s, 0);
        }

        60% {
            opacity:1;
            @{-}transform: translate3d(-8%, -8%, 0);
        }

        75% {
            @{-}transform: translate3d(5%, 5%, 0);
        }

        90% {
            @{-}transform: translate3d(-2.5%, -2.5%, 0);
        }

        100% {
            @{-}transform: translate3d(0, 0, 0);
        }
    }
}
.bounceOut(@n:bounceOut){
    .keyframes(@n);
    .-frames(@-...){
        20% {
            @{-}transform: scale3d(.9, .9, .9);
        }

        50%, 55% {
            .opacity(100);
            @{-}transform: scale3d(1.1, 1.1, 1.1);
        }

        100% {
            .opacity(0);
            @{-}transform: scale3d(.3, .3, .3);
        }
    }
}
.bounceOutDown(@n:bounceOutDown){
    .keyframes(@n);
    .-frames(@-...){
        20% {
            @{-}transform: translate3d(0, 10px, 0);
        }

        40%, 45% {
            .opacity(100);
            @{-}transform: translate3d(0, -20px, 0);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(0, 2000px, 0);
        }
    }
}
.bounceOutLeft(@n:bounceOutLeft){
    .keyframes(@n);
    .-frames(@-...){
        20% {
            .opacity(100);
            @{-}transform: translate3d(20px, 0, 0);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(-2000px, 0, 0);
        }
    }
}
.bounceOutRight(@n:bounceOutRight){
    .keyframes(@n);
    .-frames(@-...){
        20% {
            .opacity(100);
            @{-}transform: translate3d(-20px, 0, 0);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(2000px, 0, 0);
        }
    }
}
.bounceOutUp(@n:bounceOutUp){
    .keyframes(@n);
    .-frames(@-...){
        20% {
            @{-}transform: translate3d(0, -10px, 0);
        }

        40%, 45% {
            .opacity(100);
            @{-}transform: translate3d(0, 20px, 0);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(0, -2000px, 0);
        }
    }
}
.fadeIn(@x: 0;@y: 0;@n: fadeIn){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            opacity:0;
            @{-}transform: translate3d(@x, @y, 0);
        }
        100% {
            opacity:1;
            @{-}transform: none;
        }
    }
}
.fadeInDown(@n:fadeInDown){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(0, -100%, 0);
        }
        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.fadeInDownBig(@n:fadeInDownBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(0, -2000px, 0);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}

.fadeInLeft(@n:fadeInLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(-100%, 0, 0);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.fadeInLeftBig(@n:fadeInLeftBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(-2000px, 0, 0);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.fadeInRight(@n:fadeInRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate(100%, 0,);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.fadeInRightBig(@n:fadeInRightBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(2000px, 0, 0);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.fadeInUp(@n:fadeInUp){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(0, 100%, 0);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.fadeInUpBig(@n:fadeInUpBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(0, 2000px , 0);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}

.fadeOut(@x: 0;@y: 0;@n: fadeOut){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }
        100% {
            .opacity(0);
            @{-}transform: translate3d(@x, @y, 0);
        }
    }
}
.fadeOutDown(@n:fadeOutDown){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }
        100% {
            .opacity(0);
            @{-}transform: translate3d(0, 100%, 0);
        }
    }
}
.fadeOutDownBig(@n:fadeOutDownBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(0, 2000px, 0);
        }
    }
}
.fadeOutLeft(@n:fadeOutLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(-100%, 0, 0);
        }
    }
}
.fadeOutLeftBig(@n:fadeOutLeftBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }
        100% {
            .opacity(0);
            @{-}transform: translate3d(-2000px, 0, 0);
        }
    }
}
.fadeOutRight(@n:fadeOutRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }
        100% {
            .opacity(0);
            @{-}transform: translate3d(100%, 0, 0);
        }
    }
}
.fadeOutRightBig(@n:fadeOutRightBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(2000px, 0, 0);
        }
    }
}
.fadeOutUp(@n:fadeOutUp){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(0, -100%, 0);
        }
    }
}
.fadeOutUpBig(@n:fadeOutUpBig){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(0, -2000px, 0);
        }
    }
}
.flip(@n:flip){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            @{-}animation-timing-function: ease-out;
        }

        40% {
            @{-}transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            @{-}animation-timing-function: ease-out;
        }

        50% {
            @{-}transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            @{-}animation-timing-function: ease-in;
        }

        80% {
            @{-}transform: perspective(400px) scale3d(.95, .95, .95);
            @{-}animation-timing-function: ease-in;
        }

        100% {
            @{-}transform: perspective(400px);
            @{-}animation-timing-function: ease-in;
        }
    }
}
.flipInX(@n:flipInX){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            @{-}transition-timing-function: ease-in;
            .opacity(0);
        }

        40% {
            @{-}transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            @{-}transition-timing-function: ease-in;
        }

        60% {
            @{-}transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            .opacity(100);
        }

        80% {
            @{-}transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        }

        100% {
            @{-}transform: perspective(400px);
        }
    }
}
.flipInY(@n:flipInY){
    .keyframes(@n);
    .-frames(@-...){
        0% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        @{-}transition-timing-function: ease-in;
        .opacity(0);
        }

        40% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        @{-}transition-timing-function: ease-in;
        }

        60% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        .opacity(100);
        }

        80% {
        @{-}transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        }

        100% {
        @{-}transform: perspective(400px);
        }
    }
}
.flipOutX(@n:flipOutX){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: perspective(400px);
        }

        30% {
            @{-}transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            .opacity(100);
        }

        100% {
            @{-}transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            .opacity(0);
        }
    }
}
.flipOutY(@n:flipOutY){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: perspective(400px);
        }

        30% {
            @{-}transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            .opacity(100);
        }

        100% {
            @{-}transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            .opacity(0);
        }
    }
}

//scale
.scaleIn(@n:scaleIn){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(0, 0, 1);
        }

        100% {
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}
.scaleInX(@n:scaleInX){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(0, 1, 1);
        }

        100% {
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}
.scaleInY(@n:scaleInY){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 0, 1);
        }

        100% {
            @{-}transform: scale3d(1, 1, 1);
        }
    }
}
.scaleOut(@n:scaleOut){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 1, 1);
        }

        100% {
            @{-}transform: scale3d(0, 0, 1);
        }
    }
}
.scaleOutX(@n:scaleOutX){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 1, 1);
        }

        100% {
            @{-}transform: scale3d(0, 1, 1);
        }
    }
}
.scaleOutY(@n:scaleOutY){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: scale3d(1, 1, 1);
        }

        100% {
            @{-}transform: scale3d(1, 0, 1);
        }
    }
}

.lightSpeedInLeft(@n:lightSpeedInLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: translate3d(-100%, 0, 0) skewX(30deg);
            .opacity(0);
        }

        60% {
            @{-}transform: skewX(-20deg);
            .opacity(100);
        }

        80% {
            @{-}transform: skewX(5deg);
            .opacity(100);
        }

        100% {
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.lightSpeedInRight(@n:lightSpeedInRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform: translate3d(100%, 0, 0) skewX(-30deg);
            .opacity(0);
        }

        60% {
            @{-}transform: skewX(20deg);
            .opacity(100);
        }

        80% {
            @{-}transform: skewX(-5deg);
            .opacity(100);
        }

        100% {
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.lightSpeedOutLeft(@n:lightSpeedOutLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }
        100% {
            @{-}transform: translate(-100%, 0) skewX(-30deg);
            .opacity(0);
        }
    }
}
.lightSpeedOutRight(@n:lightSpeedOutRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }
        100% {
            @{-}transform: translate(100%, 0) skewX(30deg);
            .opacity(0);
        }
    }
}
.rotateIn(@n:rotateIn){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: center;
            @{-}transform: rotate3d(0, 0, 1, -200deg);
            .opacity(0);
        }

        100% {
            @{-}transform-origin: center;
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.rotateInDownLeft(@n:rotateInDownLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: left bottom;
            @{-}transform: rotate3d(0, 0, 1, -45deg);
            .opacity(0);
        }

        100% {
            @{-}transform-origin: left bottom;
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.rotateInDownRight(@n:rotateInDownRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: right bottom;
            @{-}transform: rotate3d(0, 0, 1, 45deg);
            .opacity(0);
        }
        100% {
            @{-}transform-origin: right bottom;
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.rotateInUpLeft(@n:rotateInUpLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: left bottom;
            @{-}transform: rotate3d(0, 0, 1, 45deg);
            .opacity(0);
        }

        100% {
            @{-}transform-origin: left bottom;
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.rotateInUpRight(@n:rotateInUpRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: right bottom;
            @{-}transform: rotate3d(0, 0, 1, -90deg);
            .opacity(0);
        }

        100% {
            @{-}transform-origin: right bottom;
            @{-}transform: none;
            .opacity(100);
        }
    }
}
.rotateOut(@n:rotateOut){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: center;
            .opacity(100);
        }

        100% {
            @{-}transform-origin: center;
            @{-}transform: rotate3d(0, 0, 1, 200deg);
            .opacity(0);
        }
    }
}

.rotateOutDownLeft(@n:rotateOutDownLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: left bottom;
            .opacity(100);
        }

        100% {
            @{-}transform-origin: left bottom;
            @{-}transform: rotate3d(0, 0, 1, 45deg);
            .opacity(0);
        }
    }
}
.rotateOutDownRight(@n:rotateOutDownRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: right bottom;
            .opacity(100);
        }

        100% {
            @{-}transform-origin: right bottom;
            @{-}transform: rotate3d(0, 0, 1, -45deg);
            .opacity(0);
        }
    }
}
.rotateOutUpLeft(@n:rotateOutUpLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: left bottom;
            .opacity(100);
        }

        100% {
            @{-}transform-origin: left bottom;
            @{-}transform: rotate3d(0, 0, 1, -45deg);
            .opacity(0);
        }
    }
}
.rotateOutUpRight(@n:rotateOutUpRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: right bottom;
            .opacity(100);
        }

        100% {
            @{-}transform-origin: right bottom;
            @{-}transform: rotate3d(0, 0, 1, 90deg);
            .opacity(0);
        }
    }
}

// Specials
.hingeLeft(@n:hingeLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: top left;
            @{-}animation-timing-function: ease-in-out;
        }

        20%, 60% {
            @{-}transform: rotate3d(0, 0, 1, 80deg);
            @{-}transform-origin: top left;
            @{-}animation-timing-function: ease-in-out;
        }

        40%, 80% {
            @{-}transform: rotate3d(0, 0, 1, 60deg);
            @{-}transform-origin: top left;
            @{-}animation-timing-function: ease-in-out;
            .opacity(100);
        }

        100% {
            @{-}transform: translate3d(0, 700px, 0);
            .opacity(0);
        }
    }
}
.hingeRight(@n:hingeRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform-origin: top right;
            @{-}animation-timing-function: ease-in-out;
        }

        20%, 60% {
            @{-}transform: rotate3d(0, 0, 1, -80deg);
            @{-}transform-origin: top right;
            @{-}animation-timing-function: ease-in-out;
        }

        40%, 80% {
            @{-}transform: rotate3d(0, 0, 1, -60deg);
            @{-}transform-origin: top right;
            @{-}animation-timing-function: ease-in-out;
            .opacity(100);
        }

        100% {
            @{-}transform: translate3d(0, 700px, 0);
            .opacity(0);
        }
    }
}
.rollInLeft(@n:rollInLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.rollInRight(@n:rollInRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        }

        100% {
            .opacity(100);
            @{-}transform: none;
        }
    }
}
.rollOutLeft(@n:rollOutLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        }
    }
}
.rollOutRight(@n:rollOutRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        100% {
            .opacity(0);
            @{-}transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        }
    }
}
.zoomIn(@n:zoomIn){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: scale3d(.3, .3, .3);
        }

        50% {
            .opacity(100);
        }
    }
}
.zoomInDown(@n:zoomInDown){
    .keyframes(@n);
    .-frames(@-...){
        0% {
        .opacity(0);
            @{-}transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        60% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }
}
.zoomInLeft(@n:zoomInLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        60% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }
}
.zoomInRight(@n:zoomInRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        60% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }
}
.zoomInUp(@n:zoomInUp){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(0);
            @{-}transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        60% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }
}
.zoomOut(@n:zoomOut){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            .opacity(100);
        }

        50% {
            .opacity(0);
            @{-}transform: scale3d(.3, .3, .3);
        }

        100% {
            .opacity(0);
        }
    }
}
.zoomOutDown(@n:zoomOutDown){
    .keyframes(@n);
    .-frames(@-...){
        40% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        100% {
            .opacity(0);
            @{-}transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            @{-}transform-origin: center bottom;
            @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }
}
.zoomOutLeft(@n:zoomOutLeft){
    .keyframes(@n);
    .-frames(@-...){
        40% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);    
        }

        100% {
            .opacity(0);
            @{-}transform: scale(.1) translate3d(-2000px, 0, 0);
            @{-}transform-origin: left center;    
        }
    }
}
.zoomOutRight(@n:zoomOutRight){
    .keyframes(@n);
    .-frames(@-...){
        40% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        }

        100% {
            .opacity(0);
            @{-}transform: scale(.1) translate3d(2000px, 0, 0);
            @{-}transform-origin: right center;
        }
    }
}
.zoomOutUp(@n:zoomOutUp){
    .keyframes(@n);
    .-frames(@-...){
        40% {
            .opacity(100);
            @{-}transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        100% {
            .opacity(0);
            @{-}transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            @{-}transform-origin: center bottom;
            @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }
}

// turnIn
.turnInDown(@p: 600px;@n:turnInDown){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateX(180deg);
            .opacity(0);
            @{-}transform-origin:50% 0;
        }
        100% {
            @{-}transform:perspective(@p) rotateX(0deg);
            .opacity(100);
            @{-}transform-origin:50% 0;
        }
    }
}
.turnInUp(@p: 600px;@n:turnInUp){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateX(-180deg);
            .opacity(0);
            @{-}transform-origin:50% 100%;
        }
        100% {
            @{-}transform:perspective(@p) rotateX(0deg);
            .opacity(100);
            @{-}transform-origin:50% 100%;
        }
    }
}
.turnInLeft(@p: 1300px;@n:turnInLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateY(-180deg);
            .opacity(0);
            @{-}transform-origin:0 50%;
        }
        100% {
            @{-}transform:perspective(@p) rotateY(0deg);
            .opacity(100);
            @{-}transform-origin:0 50%;
        }
    }
}
.turnInRight(@p: 1300px;@n:turnInRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateY(180deg);
            .opacity(0);
            @{-}transform-origin:100% 50%;
        }
        100% {
            @{-}transform:perspective(@p) rotateY(0deg);
            .opacity(100);
            @{-}transform-origin:100% 50%;
        }
    }
}

.turnOutDown(@p: 600px;@n:turnOutDown){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateX(0deg);
            .opacity(100);
            @{-}transform-origin:50% 100%;
        }
        100% {
            @{-}transform:perspective(@p) rotateX(-180deg);
            .opacity(0);
            @{-}transform-origin:50% 100%;
        }
    }
}
.turnOutUp(@p: 600px;@n:turnOutUp){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateX(0deg);
            .opacity(100);
            @{-}transform-origin:50% 0;
        }
        100% {
            @{-}transform:perspective(@p) rotateX(180deg);
            .opacity(0);
            @{-}transform-origin:50% 0;
        }
    }
}
.turnOutLeft(@p: 1300px;@n:turnOutLeft){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateY(0deg);
            .opacity(100);
            @{-}transform-origin:0 50%;
        }
        100% {
            @{-}transform:perspective(@p) rotateY(-180deg);
            .opacity(0);
            @{-}transform-origin:0 50%;
        }
    }
}
.turnOutRight(@p: 1300px;@n:turnOutRight){
    .keyframes(@n);
    .-frames(@-...){
        0% {
            @{-}transform:perspective(@p) rotateY(0deg);
            .opacity(100);
            @{-}transform-origin:100% 50%;
        }
        100% {
            @{-}transform:perspective(@p) rotateY(180deg);
            .opacity(0);
            @{-}transform-origin:100% 50%;
        }
    }
}

.rotate_ani(@deg:360deg;@n:rotate_ani){
    .keyframes(@n);
    .-frames(@-...){
        0%,100% {
             @{-}transform:rotate(0deg);
        }
        100%{
             @{-}transform:rotate(@deg);
        }
    }
}

